<!--
 * @Autor: dingxiaolin
 * @Date: 2021-07-19 11:19:14
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-28 11:08:19
-->
<template>
    <new-search-panel :showAdvanced="false" @search="onSearch" @reset="onReset" v-if="$hasPerm('sysFileInfo:page')">
        <template #default>
            <a-col :md="24" :sm="24">
                <a-form-item label="文件仓库">
                    <a-input :maxLength="35" v-model:value="fileBucket" allow-clear placeholder="请输入文件仓库" />
                </a-form-item>
            </a-col>
        </template>
        <template #button>
            <a-upload v-if="$hasPerm('sysFileInfo:upload')" name="file" :multiple="true" :customRequest="customRequest" :showUploadList="false">
                <a-button type="primary">
                    <template #icon><UploadOutlined /></template>
                    上传文件
                </a-button>
            </a-upload>
        </template>
    </new-search-panel>
    <dynamic-table
        :tableType="1"
        ref="tableRef"
        :columns="columns"
        :get-list-func="sysFileInfoPage"
        :queryParam="{ fileBucket: fileBucket }"
        rowKey="id"
        v-if="$hasPerm('sysFileInfo:detail')"
        :scrollX="1000"
        :fixed="true"
    >
        <template #fileLocation="{ text }">
            <span>{{ fileLocationFilter(text) }}</span>
        </template>
        <template #action="{ record }">
            <a @click="preview(record)">预览</a>
            <!-- <a-divider type="vertical" /> -->
        </template>
    </dynamic-table>

    <preview-modal v-if="visible" v-model:visible="visible" type="image" :url="imageUrl" />
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
import { newSearchPanel, DynamicTable, ellipsis } from '@/components'
import { columns } from './columns'
import { sysFileInfoPage } from '@/api/system/file'
import PreviewModal from '@/components/preview-modal.vue'

export default defineComponent({
    name: 'sys_file_mgr_sys_file',
    components: {
        DynamicTable,
        ellipsis,
        newSearchPanel,
        PreviewModal
    },
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const tableRef = ref<any>(null)
        const state = reactive({
            fileBucket: '',
            visible: false,
            fileLocationDictTypeDropDown: [] as any,
            imageUrl: ''
        })

        onMounted(() => {
            // const rect = document.getElementsByClassName('ant-table-thead')[0].getBoundingClientRect().bottom
            // state.scroll = { y: `calc(100vh - ${rect + 100}px)` }

            store.dispatch('enums/getEnum', 'file_storage_location').then((res) => {
                state.fileLocationDictTypeDropDown = res
            })
        })
        const fileLocationFilter = (fileLocation) => {
            const values = state.fileLocationDictTypeDropDown.filter((item) => item.code == fileLocation)
            if (values.length > 0) {
                return values[0].value
            }
        }
        /**
         * 查询
         */
        const onSearch = () => {
            tableRef.value.queryParam = { fileBucket: state.fileBucket }
            tableRef.value.resetPagination()
            tableRef.value.refreshTableData()
        }
        /**
         * 重置
         */
        const onReset = () => {
            state.fileBucket = ''
            // 重置分页并查询
            onSearch()
        }
        /**
         * 预览
         */
        const preview = (record) => {
            console.log('//', record.id)
            state.imageUrl = 'http://129.211.119.124/app-admin/file/preview?id=' + record.id
            state.visible = true //这里只做演示，不涉及具体图片展示
        }
        /**
         * 上传文件
         */
        const customRequest = (data) => {
            console.log('data', data.file, data.filename)
            const formData = new FormData()
            formData.append('file', data.file)
        }

        return {
            ...toRefs(state),
            sysFileInfoPage,
            onSearch,
            onReset,
            fileLocationFilter,
            tableRef,
            preview,
            customRequest,
            columns
        }
    }
})
</script>

<style lang='scss' scoped>
</style>
